<template>
  <div class="prosearch">
    <el-form :inline="true" :model="formPro" class="demo-form-inline">
      <el-form-item label="商品名称" name="proname">
        <el-input v-model="formPro.Name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="授权方" name="proauth">
        <el-select v-model="formPro.nauth" placeholder="请选择授权方">
          <el-option v-for="item in formPro.auth" :label="item.account" :value="item.account" :key="item.member_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" name="prostatus">
        <el-select v-model="formPro.statusVal" placeholder="全部状态">
          <el-option v-for="item in formPro.status" :key="item.statusVal" :label="item.prolabel" :value="item.statusVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="授权IP" name="proIP">
        <el-select v-model="formPro.valIP" placeholder="选择授权IP">
          <el-option v-for="(item, index) in formPro.authIP" :label="item" :value="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item name="searchpro">
        <el-button type="primary" @click="onSubmit($event)">搜素</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from '@/utils/request.js'
export default {
  name: 'ProlistSearch',
  data () {
    return {
      formPro: {
        Name: '',
        auth: [],
        nauth: [],
        status: [
          {
            statusVal: '',
            prolabel: '全部状态'
          },
          {
            statusVal: '0',
            prolabel: '编辑中'
          },
          {
            statusVal: '3',
            prolabel: '待审核'
          },
          {
            statusVal: '4',
            prolabel: '审核退回'
          },
          {
            statusVal: '2',
            prolabel: '审核通过'
          },
          {
            statusVal: '5',
            prolabel: '用码中'
          }
        ],
        statusVal: '',
        authIP: [],
        valIP: ''
      }
    }
  },
  methods: {
    onSubmit (event) {
      this.pageClick(1, this.formPro.nauth, this.formPro.Name, this.formPro.valIP, this.formPro.statusVal)
    },
    //  调用分页组件方法
    pageClick (a, b, c, d, e) {
      this.$parent.paginClick(a, b, c, d, e)
    },
    //  商品列表-授权IP
    showIp () {
      request.getIp()
        .then((res) => {
          this.formPro.authIP = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //  授权方下拉框
    showByMerchantIdToMember () {
      request.getByMerchantIdToMember0()
        .then((res) => {
          this.formPro.auth = res
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  mounted () {
    this.showIp()
    this.showByMerchantIdToMember()
  }
}
</script>
<style lang="stylus">
@import '~styles/varibles.styl'
.prosearch {
  margin-bottom: 12px;
}
.prosearch .el-form-item{
  margin-right: 0;
  margin-bottom: 15px;
}
.prosearch .el-form-item .el-input__inner{
  height: 36px;
  line-height: 34px;
  box-sizing: border-box;
}
.prosearch .el-form-item .el-form-item__label{
  height: 36px;
  line-height: 36px;
}
.prosearch .el-form-item[name="proname"] .el-form-item__label{
  width: 80px;
  text-align: left;
}
.prosearch .el-form-item[name="proIP"] .el-form-item__label{
  width: 80px;
}
.prosearch .el-form-item[name="proauth"] .el-form-item__label{
  width: 100px;
}
.prosearch .el-form-item[name="proauth"] .el-input__inner{
  width: 260px;
}
.prosearch .el-form-item[name="prostatus"] .el-form-item__label{
  width: 120px;
}
.prosearch .el-form-item[name="prostatus"] .el-input__inner{
  width: 125px;
}
.prosearch .el-form-item[name="searchpro"] button {
  font-weight: 600;
  background-color: $baseColor;
  color: #fff;
  border: 1px solid $baseColor;
  width: 90px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 20px;
  box-sizing: border-box;
  outline: none;
  padding: 0;
}
</style>
